<!DOCTYPE html>
<html>
<head>
    <title>04_DOM高级编程</title>

    <meta charset="UTF-8"/>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>

    <meta name="HandheldFriendly" content="true"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link href="./asset/gitbook/style.css" type="text/css" rel="stylesheet"/>
    <link href="./asset/gitbook/istyle.css" type="text/css" rel="stylesheet"/>

    <style type="text/css">
        
            span.md_line{margin-bottom:0.5em; display:block; line-height:1.89}
            .md_line br{ display: none;}
            
    </style>

    <script>
        var flowchat_options = {
            'x': 0, 'y': 0, 'line-width': 1, 'line-length': 50, 'text-margin': 10, 'font-size': 13,
            'font-color': '#3c3c3c', 'line-color': '#666666', 'element-color': '#666666', 'fill': 'transparent',
            'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block', 'class': 'flowchart', 'scale': 1,
            'symbols': { 'start': {}, 'end': {}, 'condition': {}, 'inputoutput': {}, 'operation': {}, 'subroutine': {}}
        }
    </script>
    <script type="text/javascript" src="./asset/other/raphael-min.js"></script>
    <script type="text/javascript" src="./asset/other/flowchart.js"></script>
    <script type="text/javascript" src="./asset/other/echarts.min.js"></script>


</head>

<body>





<div data-basepath="/service/gitbook" class="book">
    <div class="book-summary">
        <ul class="summary">
            <li>
                <a href="./index.html">笔记</a>
            </li>
            <li class="divider"></li>
            
                
                
    
    <li data-level="1" class="chapter" data-path="01_JavaScript基本语法.html">
        
        
        <a href="./01_JavaScript基本语法.html" ><b>1</b> 第一章:JavaScript基本语法</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="2" class="chapter" data-path="02_函数与window对象.html">
        
        
        <a href="./02_函数与window对象.html" ><b>2</b> 第二章_函数与window对象</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="3" class="chapter" data-path="03_DOM编程.html">
        
        
        <a href="./03_DOM编程.html" ><b>3</b> 03_DOM编程</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="4" class="chapter active" data-path="04_DOM高级编程.html">
        
        
        <a href="./04_DOM高级编程.html" ><b>4</b> 04_DOM高级编程</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="5" class="chapter" data-path="05_控制CSS样式.html">
        
        
        <a href="./05_控制CSS样式.html" ><b>5</b> 05_控制CSS样式</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="6" class="chapter" data-path="06_表单验证及操作基础.html">
        
        
        <a href="./06_表单验证及操作基础.html" ><b>6</b> 06_表单验证及操作基础</a>
        
            
                    
                
        
    </li>

            
        </ul>

    </div>

    <div class="book-body">
        <div class="body-inner">

            <div class="book-header" role="navigation">
                <h1>
                    <a href="./index.html" > 笔记</a>
                </h1>
            </div>

            <div tabindex="-1" class="page-wrapper">
                <div class="page-inner">
                    <h2 class="post_title"> 04_DOM高级编程 </h2>
                    <div class="post_body"> <p class="md_block">

<div class="toc"><ul>
<li>
<a href="#toc_0">04_DOM高级编程</a>
<ul>
<li>
<a href="#toc_1">DOM节点</a>
</li>
<li>
<a href="#toc_2">获取层次节点</a>
</li>
<li>
<a href="#toc_3">节点操作</a>
<ul>
<li>
<a href="#toc_4">杂乱多  上面属性及方法的用法</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</p>


<h2 id="toc_1">DOM节点</h2>

<p class="md_block">
    <span class="md_line">1.node节点属性<br /></span>
    <span class="md_line">节点可分为元素节点,属性节点,文本节点,而节点都有三个属性值非常重要<br /></span>
    <span class="md_line">节点的三个属性值</span>
</p>

<table>
 <thead><tr><th style="text-align:left">类型</th>
<th style="text-align:left">nodeName</th>
<th style="text-align:left">nodeType</th>
<th style="text-align:left">nodeValue</th>
 </tr>
</thead>
 <tbody><tr><td style="text-align:left">元素 </td>
<td style="text-align:left"> 元素名称  </td>
<td style="text-align:left"> 1 </td>
<td style="text-align:left"> null</td>
</tr>
<tr><td style="text-align:left">属性 </td>
<td style="text-align:left"> 属性名称 </td>
<td style="text-align:left"> 2 </td>
<td style="text-align:left"> 属性值</td>
</tr>
<tr><td style="text-align:left">文本 </td>
<td style="text-align:left"> #text </td>
<td style="text-align:left"> 3 </td>
<td style="text-align:left"> 文本内容(不包括html标签)</td>
</tr>
</tbody> 
</table>
<!--block_code_end-->
<h2 id="toc_2">获取层次节点</h2>
<table>
 <thead><tr><th style="text-align:left">属性</th>
<th style="text-align:left">说明</th>
 </tr>
</thead>
 <tbody><tr><td style="text-align:left">childNodes </td>
<td style="text-align:left"> 获取当前元素所有的子节点(子节点对象集合)</td>
</tr>
<tr><td style="text-align:left">firstChild </td>
<td style="text-align:left"> 获取当前元素的第一个子节点(节点)</td>
</tr>
<tr><td style="text-align:left">lastChild </td>
<td style="text-align:left"> 获取当前元素的最后一个子节点(节点)</td>
</tr>
<tr><td style="text-align:left">ownerDocument </td>
<td style="text-align:left"> 获取当前文档的根节点,就是document(节点)</td>
</tr>
<tr><td style="text-align:left">parentNode </td>
<td style="text-align:left"> 获取当前元素的父节点(节点)</td>
</tr>
<tr><td style="text-align:left">previousSibling </td>
<td style="text-align:left"> 获取当前元素前的同级节点(节点)</td>
</tr>
<tr><td style="text-align:left">nextSibling </td>
<td style="text-align:left"> 获取当前元素后的同级节点(节点)</td>
</tr>
<tr><td style="text-align:left">attributes </td>
<td style="text-align:left"> 获取当前元素的所有'属性节点'集合.(属性对象集合)</td>
</tr>
</tbody> 
</table>
<!--block_code_end-->
<h2 id="toc_3">节点操作</h2>
<table>
 <thead><tr><th style="text-align:left">方法</th>
<th style="text-align:left">说明</th>
 </tr>
</thead>
 <tbody><tr><td style="text-align:left">write() </td>
<td style="text-align:left"> 可以把任意字符串插入到文档中</td>
</tr>
<tr><td style="text-align:left">creatElement() </td>
<td style="text-align:left"> 创建一个元素节点</td>
</tr>
<tr><td style="text-align:left">createTextNode() </td>
<td style="text-align:left"> 创建一个文本节点</td>
</tr>
<tr><td style="text-align:left">appendChild() </td>
<td style="text-align:left"> 插入新的子节点到节列列表结尾</td>
</tr>
<tr><td style="text-align:left">insertBefore() </td>
<td style="text-align:left"> 将新节点插入到前面</td>
</tr>
<tr><td style="text-align:left">repalceChild() </td>
<td style="text-align:left"> 将新节点替换旧节点</td>
</tr>
<tr><td style="text-align:left">cloneNode() </td>
<td style="text-align:left"> 复制节点</td>
</tr>
<tr><td style="text-align:left">removeChild() </td>
<td style="text-align:left"> 移除节点</td>
</tr>
</tbody> 
</table>
<!--block_code_end-->
<h3 id="toc_4">杂乱多  上面属性及方法的用法</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            
            <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
                <span class="c1">//var div = document.getElementById(&#39;div1&#39;);</span>
                <span class="c1">//var father = div.parentNode.parentNode;//获取父节点</span>
                <span class="c1">//father.setAttribute(&#39;id&#39;,&#39;p1&#39;);</span>
                <span class="c1">//var sons = div.childNodes;//获取div的子元素集合</span>
                <span class="c1">//sons[0].innerHTML = &#39;试试不就知道了&#39;;</span>
                <span class="c1">//补充知识点(节点类型:元素,文本,属性)noteType</span>
                <span class="cm">/*for(var i = 0 ; i &lt; sons.length ; i++){</span>
<span class="cm">                    alert(sons[i].nodeType);</span>
<span class="cm">                    alert(sons[i].nodeName);</span>
<span class="cm">                    alert(sons[i].nodeValue);</span>
<span class="cm">                }*/</span>
                <span class="c1">//var first = div.firstChild;</span>
                <span class="c1">//first.setAttribute(&#39;class&#39;,&#39;aaa&#39;);</span>
                <span class="c1">//var last  = div.lastChild;</span>
                <span class="c1">//last.setAttribute(&#39;class&#39;,&#39;aaa&#39;);</span>
                <span class="c1">//var parent = div.parentNode;</span>
                <span class="c1">//parent.setAttribute(&#39;class&#39;,&#39;aaa&#39;);</span>
                <span class="c1">//var p = div.previousSibling;</span>
                <span class="c1">//p.innerHTML = &#39;试一下写入一段文字&#39;;</span>
                <span class="c1">//var p = div.nextSibling;</span>
                <span class="c1">//p.innerHTML = &#39;试一下写入一段文字&#39;;</span>
                <span class="c1">//var attr = div.attributes;</span>
                <span class="c1">//for(var i = 0 ; i &lt; attr.length ; i++){</span>
                <span class="c1">//  alert(attr[i].nodeName + &#39;=&#39;+ attr[i].nodeValue);</span>
                <span class="c1">//  alert(attr[i].nodeType);</span>
                <span class="c1">//}</span>
                
                <span class="c1">//创建一个节点</span>
                
                <span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;div1&#39;</span><span class="p">);</span>
                <span class="c1">//在内存中创建一个p标签  (&lt;p&gt;&lt;/p&gt;)</span>
                <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">);</span>
                <span class="c1">//给刚创建好的p标签插入一段文字  (&lt;p&gt;这是一个P标签&lt;/p&gt;)</span>
                <span class="nx">p</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">&#39;这是一个P标签&#39;</span><span class="p">;</span>
                <span class="c1">//给div插入一个子元素到最后.</span>
                <span class="c1">//div.appendChild(p);</span>
                
                <span class="c1">//给div插入一个子元素p 入在div下面第一个元素的前面</span>
                <span class="nx">div</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span><span class="nx">div</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">);</span><span class="c1">//2参数</span>
                
                <span class="c1">//子节点替换</span>
                <span class="c1">//div.replaceChild(p,div.firstChild);</span>
                
                <span class="c1">//子节点克隆(复制) 参数true是复制内容,不传参或传false则只复制标签</span>
                <span class="kd">var</span> <span class="nx">e</span> <span class="o">=</span> <span class="nx">div</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">.</span><span class="nx">cloneNode</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
                <span class="c1">//var e = div.firstChild;</span>
                <span class="nx">div</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
                
                <span class="c1">//移除子节点</span>
                <span class="nx">div</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
                
                <span class="c1">//createTextNode(&#39;文内内容&#39;)   创建一个文本节点</span>
                
            <span class="p">}</span>
    
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;div1&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ccccccc&quot;</span><span class="p">&gt;&lt;</span><span class="nt">ul</span><span class="p">&gt;&lt;/</span><span class="nt">ul</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end--> </div>
                </div>
            </div>

        </div>

    </div>

</div>


<script type="text/javascript" src="./asset/gitbook/app.js"></script>

<script>require(["gitbook"], function (gitbook) {
    var config = {"fontSettings": {"theme": null, "family": "sans", "size": 2}};
    gitbook.start(config);
});

</script>





</body>

</html>